Star's Blog

今天魔改 hugo-stack 的时候，感觉原来那个蓝蓝的配色实在是有点丑，既然这次已经大型魔改了，就一起改了吧，过程中遇到了点小困难。

根据网上查到方法大都是直接在 hugo.yaml 里面改 markup.highlight.style，但是我不知道是不是因为我配置的问题改了没用，所以又查了很久的资料，终于是解决了，特此记录。

用 chromastyles 生成 scss 文件到 assets/scss/partials/highlight，我选了 xcode 主题，其他可选的主题见 Chroma Style Gallery

1
hugo gen chromastyles --style=xcode > assets/scss/partials/highlight/light.scss
2
hugo gen chromastyles --style=xcode-dark > assets/scss/partials/highlight/dark.scss

这样刷新一下就可以看到效果了，不过这样会衍生出来两个新问题。

1. 背景颜色不统一的问题，打开生成的 scss，找到 prewrapper 这一行改一下即可

   1
   /* PreWrapper */ .chroma { background-color:#fafafa; }

2. 代码又不能横向滚动了，于是我把原来那份 css 的滚动逻辑复制进来了

   1
   /* LineTableTD */
   2
   .chroma .lntd {
   3
       vertical-align: top;
   4
       padding: 0;
   5
       margin: 0;
   6
       border: 0;
   7
   }
   8
   
   9
   /* LineTable */
   10
   .chroma .lntable {
   11
       border-spacing: 0;
   12
       padding: 0;
   13
       margin: 0;
   14
       border: 0;
   15
       width: 100%;
   16
       display: block;
   17
   
   18
       > tbody {
   19
           display: block;
   20
           width: 100%;
   21
           > tr {
   22
               display: flex;
   23
               width: 100%;
   24
               > td:last-child {
   25
                   overflow-x: auto;
   26
               }
   27
           }
   28
       }
   29
   }

另外行内代码也很丑，颜色在 assets/variables.scss 里面的这两行，顺手也改了

1
--code-background-color: rgb(246, 248, 250);
2
--code-text-color: #202328;